<style scoped>
.cardTop {
  height: 85%;
  padding: 3px;
}
.cardBottom {
  border-top: 1px solid #d7d7d7;
  color: grey;
  height: 12%;
  padding: 4px;
}
.tipLeft {
  border-right: 1px solid #d7d7d7;
  text-align: center;
  width: 25%;
  float: left;
  height: 100%;
}
.tipRight {
  text-align: center;
  width: 75%;
  height: 100%;
  float: left;
  padding: 10px 5px;
}
.tipInnerTop {
  height: 100%;
  width: 100%;
  padding: 10px;
}
.tipInnerBotton {
  height: 15%;
  margin-top: 3%;
}
.typeItemContain {
  width: 100%;
  height: 180px;
}
.imgStyle {
  height: 100%;
  width: 100%;
}
.contents {
  word-break: keep-all;
  /* 不换行 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
  /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.textLeft {
  float: left;
  width: 30%;
  text-align: left
}
.textMid {
  float: left;
  width: 50%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.textRgiht {
  float: left;
  width: 20%;
  text-align: right
}
.leftPart {
  width: 94%;
  float: left;
}
.rightPart {
  width: 6%;
  float: left;
  text-align: right;
  padding-right: 5px;
}
.iconn {
  color: #2d8cf0;
}
.verticalCenter{
  display: flex;
  align-items: center;
}

</style>
<template>
  <div class="typeItemContain">
    <div class="cardTop">
      <!--左边区域start-->
      <div class="tipLeft">
        <!--设备图片区域start-->
        <div class="tipInnerTop"> <img :src="preview" alt="" class="imgStyle"> </div>
        <!--设备图片区域end-->
        <!--显示设备状态start-->
        <div class="tipInnerBotton">
        <!--  <div v-show="cardData.status==1">
            <Icon type="ios-radio-button-on" :color="cardData.status==1?'green':'grey'" size="12"></Icon> <span v-bind:class="[cardData.status==1 ? 'working' : 'notWorking']">运行正常</span> </div>
          <div v-show="cardData.status==2">
            <Icon type="ios-radio-button-on" :color="cardData.status==2?'orange':'grey'" size="12"></Icon> <span v-bind:class="[cardData.status==2 ? 'working' : 'notWorking']">
                运行异常
                </span> </div>
          <div v-show="cardData.status==3">
            <Icon type="ios-radio-button-on" :color="cardData.status == 3 ?'red':'grey'" size="12"></Icon> <span v-bind:class="[cardData.status==3 ? 'working' : 'notWorking']">停止运行</span>
          </div>-->
        </div>
        <!--显示设备状态 end-->
        <Spin size="large" fix v-if="loadingImgStatus"></Spin>
      </div>
      <!--左边区域end-->
      <!--右边显示实时数据区域 start-->
      <div class="tipRight" style="overflow-y: auto">
        <Row v-for="(item, index) in properties" :key="index">
          <NumLine :did="cardData.id" :property="item" v-if="item.propertyType === 100"></NumLine>
          <ToggleLine :did="cardData.id" :property="item" v-if="item.propertyType === 101"></ToggleLine>
          <StatusLine :did="cardData.id" :property="item" v-if="item.propertyType === 103"></StatusLine>
        </Row>
      </div>
      <!--右边显示实时数据区域 end-->
    </div>
    <div class="cardBottom verticalCenter">
      <div class="leftPart"> {{cardData.name}} | {{cardData.iotSpace.name}} </div>
      <div class="rightPart"> <span style="float:right;cursor:pointer;" @click="follow(cardData)">
        <Icon type="ios-star" class="iconn" v-show="cardData.follow"></Icon>
        <Icon type="ios-star-outline" v-show="!cardData.follow"></Icon>
        </span> </div>
    </div>
  </div>
</template>
<script>
  import StatusLine from './StatusLine'
  import NumLine from './NumLine'
  import ToggleLine from './ToggleLine'
export default {
  name: 'DataCard',
  components: {NumLine, ToggleLine, StatusLine},
  props: ['cardData'],
  data: function () {
    return {
      timer: 0,
      properties: [],
      preview: null,
      loadingImgStatus: true
    }
  },
  mounted () {
    if (this.cardData.iotDevType.iconUrl === null) {
      this.preview = require('../../assets/default_device.png')
      this.loadingImgStatus = false
    } else {
      this.askPic(this.cardData.iotDevType.iconUrl)
    }
      // 初始化，定时器 请求数据
    this.loadCurData()
    this.timer = setInterval(() => {
      this.loadCurData()
    }, Math.floor(Math.random() * 3000) + 2000)
  },
  methods: {
    askPic: function (picUrl) {
      window.myapi.show_pic({url: picUrl}).then(resp => {
        this.preview = 'data:image/png;base64,' + btoa(
          new Uint8Array(resp.data)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        )
      }).catch(info => {
        this.$Notice.warning({
          title: '操作提示',
          desc: info
        })
      }).finally((fin) => {
        this.loadingImgStatus = false
      })
    },
    follow: function (obj) {
      let param = { 'id': obj.id }
      if (obj.follow) {
        this.cancelFollow(param)
      } else {
        this.doFollow(param)
      }
    },
    doFollow: function (obj) {
      window.myapi.do_follow(obj).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.$Notice.success({
            title: '关注设备成功！',
            desc: ''
          })
          this.cardData.follow = true
        } else {
          this.$Notice.warning({
            title: resp.data.msg || '返回数据异常！',
            desc: ''
          })
        }
      }).catch(() => {
        this.$Message.error('数据异常')
      })
    },
    cancelFollow: function (obj) {
      window.myapi.cancel_follow(obj).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.$Notice.success({
            title: '已取消关注该设备！',
            desc: ''
          })
          this.cardData.follow = false
        } else {
          this.$Notice.error({
            title: '返回数据异常！'
          })
        }
      }).catch(() => {
        this.$Notice.error({
          title: '返回数据异常！'
        })
      })
    },
    loadCurData: function () {
      // 根据设备id 从 服务器获取实时数据  ---- 以此分发给 子显示组件
      let param = {id: this.cardData.id}
      window.myapi.cur_data(param).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.properties = resp.data.data.iotCollItemDatas
        } else {
          this.$Notice.error({
            title: '服务器返回数据异常',
            desc: resp.data.msg
          })
        }
      }).catch((error) => {
        window.clearInterval(this.timer)
        this.$Notice.error({
          title: '返回数据异常！',
          desc: '数据异常, 已关闭请求数据, 请适时尝试刷新页面'
        })
      })
    }
  },
  beforeDestroy () {
    // 销毁函数---- 执行收尾工作  cur_data
    window.clearInterval(this.timer)
  }
}

</script>
